<template>
    <div class="table">
        <!-- title -->
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i>订单列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 表格主体 -->
        <div class="container">
            <div class="handle-tab">
                <el-tabs v-model="state" @tab-click="changState">
                    <el-tab-pane label="待付款" name="0"></el-tab-pane>
                    <el-tab-pane label="待发货" name="1"></el-tab-pane>
                    <el-tab-pane label="已发货" name="2"></el-tab-pane>
                    <el-tab-pane label="已收货" name="3"></el-tab-pane>
                    <el-tab-pane label="交易关闭" name="5"></el-tab-pane>
                </el-tabs>
            </div>
            <!-- title -->
            <div class="handle-box">
                <div class="handle-box-1">
                    商品名称：
                    <el-input v-model="goodsName" placeholder="请输入商品名称" class="handle-input"></el-input>
                    用户昵称：
                    <el-input type="nickName" v-model="nickName" placeholder="请输入用户昵称"
                              style="width:250px;margin-right:15px;">
                    </el-input>
                    手机号码：
                    <el-input v-model="mobile" placeholder="请输入用户手机号码" class="handle-input" style="margin-top:25px;margin-bottom:10px;"></el-input>
                     <br>
                    下单日期：
                    <el-date-picker value-format="yyyy-MM-dd" v-model="startDate" type="date" class="handle-date"
                                    placeholder="选择日期"  style="width:250px;"></el-date-picker>
                    终止日期：
                    <el-date-picker value-format="yyyy-MM-dd" v-model="endDate" type="date" class="handle-date"
                                    placeholder="选择日期" style="width:250px;"></el-date-picker>
                    <el-button type="primary" icon="search" @click="search">查询</el-button>
                    <el-button type="primary" icon="search" @click="reset">重置</el-button>
                </div>
            </div>
            <!-- 表格主体 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="order_code" label="订单编号" width="200" align="center"></el-table-column>
                <!-- <el-table-column prop="order_code" label="订单来源" width="120" align="center"></el-table-column> -->
                <el-table-column prop="goods_name" label="商品名称"  align="center"></el-table-column>
                <el-table-column prop="pay_money" label="订单金额" width="140" align="center"></el-table-column>
                <el-table-column prop="nick_name" label="下单人昵称" width="180" align="center"></el-table-column>
                <el-table-column type="expand" label="查看收货信息" width="120" align="center">
                    <template slot-scope="props">
                        <div class="bs-callout bs-callout-danger">
                            收货信息
                            <span style="padding-left:30px;"></span>姓名：{{props.row.address_name}}
                            <span style="padding-left:30px;"></span>收货人手机号码: {{props.row.address_mobile}}
                            <span style="padding-left:30px;"></span>收货地址：{{props.row.province}}{{props.row.city}}{{props.row.address}}
                            <!-- <div style=""></div>
                            <div style="padding:0px 0px 0px 0px">
                                <div v-for="item in props.row.goods_list" style="padding:20px 0px 0px 0px" :key="item">
                                    <div style="display:inline-block;padding-right:30px;height:100px;line-height:100px;">
                                        商品图片：<img :src="item.head_img" style="width:160px;height:auto;display:inline-block;vertical-align: middle;"/>
                                    </div>
                                    <div style="display:inline-block;padding-right:30px;">商品名称：{{item.name}}</div>
                                    <div style="display:inline-block;padding-right:30px;height:100px;">商品规格：{{item.spec}}</div>
                                    <div style="display:inline-block;padding-right:30px;">商品价格：{{item.single_price}}</div>
                                    <div style="display:inline-block;padding-right:30px;">购买数量：{{item.nums}}</div>
                                    <div style="display:inline-block;padding-right:30px;">总计：{{item.nums| amount(item.single_price)}}</div>
                                </div>
                            </div> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="下单时间" width="180" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="160">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="handleLook(scope.$index, scope.row)">查看详情
                        </el-button>
                        <el-button class="edit" size="small" type="text" v-show="scope.row.state == 1" @click="handleEdit(scope.$index, scope.row)">
                            填写物流信息
                        </el-button>
                        <el-button class="edit" size="small" type="text" v-show="scope.row.state == 2" @click="handleShow(scope.$index, scope.row)">
                            查看物流信息
                        </el-button>
                        <!-- <el-button class="del" size="small" type="text " v-show="scope.row.state == 5" @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页按钮 -->
             <div class="pagination" v-show="totalPages>1">
                    <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
                    </el-pagination>
            </div>
             <!-- 查看物流信息弹出界面 -->
            <el-dialog title="查看物流信息" :visible.sync="isChecked"  center width="800px">
                <el-form style="width:700px; margin:0 auto">
                    <el-form-item label="物流公司：">
                        {{express_com}}
                    </el-form-item>
                    <el-form-item label="快递单号：">
                            {{express_code}}
                    </el-form-item>
                    <el-form-item label="物流信息：">  
                    </el-form-item> 
                    <el-form-item style="margin-top:-22px;">
                        <div v-for="item in express_data" style="overflow:hidden;" :key="item.datetime">
                            <div class="left">{{item.datetime}}</div>
                            <div class="right">{{item.remark}}</div>
                        </div>
                    </el-form-item> 
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="isChecked = false">关 闭</el-button>
                </div>
            </el-dialog>
            <!-- 删除提示框 -->
            <!-- <el-dialog title="提示" :visible.sync="delVisible" width="400px" center>
                <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="delVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteRow">确 定</el-button>
                </span>
            </el-dialog> -->
        </div>
    </div>
</template>
<script>
import {postOrderList,getOrderDetails,getExpressList,getExpressInfo,postSendGoods} from '@/api/order'
    export default {
        name: "orderList",
        data() {
            return {
                pageIndex: 1,//当前页码
                pageSize: 10,//每页10条
                totalPages:1,//总页数
                totalElements: 1,//默认的总条数
                tableData: [],//表格数据
                delVisible: false, //删除确认提示，默认隐藏
                goodsName:'',//商品名称
                nickName: '',//用户昵称
                mobile:'',//用户手机号码
                state: 0,
                startDate: '',//开始日期
                endDate: '',//结束日期
                value: '',
                isChecked:false,//物流信息弹出是否显示
                data:{},//收货信息数据
                express_no:'',//物流公司编号
                express_code:'',//物流单号
                express_data:[],//物流数据
                express_com:'',//物流公司名称
            }
        },
        created() {
            this.getOrderData();
        },
        filters:{
            amount:function(value1,value2){
                // console.log(value1+"===="+value2);
                return value1*value2;
            }
        },
        watch: {
            state(){
                this.getOrderData()
            }
        },
        methods: {
            //获取data数据
            getOrderData() {
               
                const param = {
                    state: this.state,
                    nickName: this.nickName,
                    goodsName:this.goodsName,
                    mobile: this.mobile,
                    startDate: this.startDate,
                    endDate: this.endDate,
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                
                }
                // console.log(param);
                postOrderList(param).then(response=>{
                console.log(response);
                if(response.code==200){
                    var data = response.data;//当前返回的数据
                    this.tableData = data.list;//列表数据
                    this.totalElements = data.total; //总条数
                    this.totalPages = Math.ceil(data.total/this.pageSize);//总页数
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: response.msg
                    });
                }

            }).catch(error=>{
                console.log(error);
            });
            },
            changState(tab) {
                this.state = tab.name;
                this.goodsName = '';
                this.mobile = '';
                this.startDate = '';
                this.endDate = '';
                this.nickName = '';
            },
            //查看订单详情
            handleLook(index, row) {

                if (row.id && row.id > 0) {
                    this.$router.push({ path: '/order/info',query:{id:row.id,type:this.state}});
                } else {
                    this.$message.error('获取ID失败:' + id);
                }
            },
            //编辑订单详情
            handleEdit(index, row) {
                if (row.id && row.id > 0) {
                    this.$router.push({path: "/order/sendgoods",query:{id:row.id}});
                } else {
                    this.$message.error('获取ID失败:' + id);
                }
            },
            // //删除订单
            // handleDelete(index, row) {
            //     if (row.id && row.id > 0) {
            //         this.delVisible = true;
            //         this.delIndex = index;//当前要删除的下标
            //         this.delId = row.id;// 当前选中ID
            //     }
            // },
            // //执行删除
            // deleteRow() {
            //     //console.log("触发了确定");
            //     if (this.delId > 0) {
            //         const querystring = require('querystring');
            //         const param = {
            //             id: this.delId
            //         }
            //         this.$axios.post('/manage/order/delete', querystring.stringify(param)).then(response => {
            //             //console.log(response);
            //             if (response.data.code == 200) {
            //                 this.tableData.splice(this.delIndex, 1);
            //                 this.$message.success('删除成功');
            //                 this.delVisible = false;
            //             } else {
            //                 this.$notify.error({
            //                     title: '删除失败',
            //                     duration: 2000,
            //                     message: '失败原因：' + response.data.msg
            //                 });
            //                 this.delVisible = false;
            //             }

            //         }).catch(error => {
            //             console.log(error);
            //         });
            //     }
            // },
            // 分页导航
            handleCurrentChange(val) {
                this.pageIndex = val
                this.getOrderData()
                // this.cur_page = val;
                //     this.getData();
            },
            //查询
            search() {
                this.getOrderData();
            },
            //重置
            reset(){
                this.goodsName = '';
                this.mobile = '';
                this.startDate = '';
                this.endDate = '';
                this.nickName = '';
                this.getOrderData();
            },
            //查看物流信息
            handleShow(index,row){
                if (row.id && row.id > 0) {
                    //通过id查询订单详情
                    getOrderDetails(row.id).then((response)=> {
                        console.log(response);
                        if(response.code==200){
                            this.express_no = response.data.express_no;//获得物流公司编号
                            this.express_com = response.data.express_name;//物流公司
                            this.express_code = response.data.express_code;//获得物流单号
                           //查询物流信息
                           getExpressInfo(this.express_no,this.express_code).then((res => {
                                // console.log("查看物流")
                                if(res.resultcode == 200){
                                    this.express_data = res.result.list;
                                    this.isChecked = true ;//显示物流信息
                                }else{
                                    this.$notify.error({
                                        title: '异常',
                                        offset: 100,
                                        message: res.reason
                                    });
                                }
                            }))
                        }else{
                            _this.$notify.error({
                                title: '异常',
                                offset: 100,
                                message: response.msg
                            });
                        }
                    })

                } else {
                    this.$message.error('获取ID失败:');
                }
            },
        }
    }
</script>
<style lang="stylus" scoped>
    .handle-box {
        margin-bottom: 20px;

    .handle-box-1 {
        margin-bottom: 15px;

    .handle-input {
        width: 250px;
        display: inline-block;
        margin-right: 30px;
    }

    .handle-date {
        margin-right: 30px;
        
    }

    }
    .handle-box-2 {

    .handle-select {
        width: 135px;
        margin-right: 30px;
    }

    }

    }
    .edit {
        color #ff9800;
    }

    .del {
        color #e51c23;
    }

.bs-callout {
    padding: 20px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
    .bs-callout-danger {
    border-left-color: #ce4844;
}
.left{
    float:left;
    width :150px;
    text-algin:center;
}
.right{
    float:left;
    width :550px;
}
</style>
